<template>
  <div class="container">
    <div class="row">
      <div class="time-box">
        <TimeLine :title="title" :timelineData="timelineData"></TimeLine>
      </div>
      <div class="record-box">
        <div class="form-box">
          <el-form ref="form" :rules="rules" model="currentRecord" label-width="120px">
            <el-row style="display: flex; justify-content: space-between;">
              <el-form-item label="患者来源" prop="origin">
                <el-input
                  v-model="currentRecord.origin"
                  placeholder="请输入患者来源"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="费用类别" prop="expenseCategory">
                <el-input
                  v-model="currentRecord.expenseCategory"
                  placeholder="请输入费用类别"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="费用" prop="expense">
                <el-input
                  v-model="currentRecord.expense"
                  placeholder="请输入费用"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: space-between;">
              <el-form-item label="就诊医院" prop="hospital">
                <el-input
                  v-model="currentRecord.hospital"
                  placeholder="请输入就诊医院名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="科室" prop="dept">
                <el-input
                  v-model="currentRecord.dept"
                  placeholder="请输入科室名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="医生" prop="doctor">
                <el-input
                  v-model="currentRecord.doctor"
                  placeholder="请输入医生姓名"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: space-between;">
              <el-form-item label="入院时间" prop="admissionTime">
                <el-date-picker
                  v-model="currentRecord.admissionTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  style="width: 200px">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="手术时间" prop="surgeryTime">
                <el-date-picker
                  v-model="currentRecord.surgeryTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  style="width: 200px">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="出院时间" prop="leaveTime">
                <el-date-picker
                  v-model="currentRecord.leaveTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  style="width: 200px">
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: left;">
              <el-form-item label="病床号" prop="bedNumber">
                <el-input
                  v-model="currentRecord.bedNumber"
                  placeholder="请输入就诊医院名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: left;">
              <el-form-item label="主要病症诉求" prop="appeal">
                <el-input
                  v-model="currentRecord.appeal"
                  type="textarea"
                  style="width: 700px"
                  placeholder="请输入内容"/>
              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: left;">
              <el-form-item label="个人病史描述" prop="message">
                <el-input
                  v-model="currentRecord.message"
                  type="textarea"
                  style="width: 700px"
                  placeholder="请输入内容"/>

              </el-form-item>
            </el-row>
            <el-row style="display: flex; justify-content: left;">
              <el-form-item label="既往病逝" prop="medicalHistoryDesc">
                <el-input
                  v-model="currentRecord.medicalHistoryDesc"
                  type="textarea"
                  style="width: 700px"
                  placeholder="请输入内容"/>

              </el-form-item>
            </el-row>
          </el-form>
          <div class="file-box">
            <div v-for="(item,index) in currentRecord.resourceList"  :key="deal">
              <img :src="item.imgPath" class="img"/>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <el-button v-if="currentRecord.state !=='1' "type="primary" @click="submitForm">提 交</el-button>
          <el-button v-if="currentRecord.state !=='1'" @click="cancel">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
    import TimeLine from '@/components/TimeLine'
    import { getRecordByUserId, delRecord, updateRecord, addRecord, getRecord } from "@/api/wechat/record";
    import { changeUserState } from "@/api/wechat/user";
    export default {
        name: 'record',
        components: {
            TimeLine
        },
        data() {
            return{
                title: 'Medical Record',
                timelineData: [],
                recordList: [],
                userId: undefined,
                currentRecord: {},
                record:undefined,
                // 表单校验
                rules: {
                }
            }
        },
        created() {
            const userId = this.$route.params && this.$route.params.userId;
            if (userId !== undefined && userId != 0) {
                this.userId = userId
                this.getRecordByUserId()
            }
        },
        methods: {
            /** 查询患者列表 */
            getRecordByUserId() {
                getRecordByUserId(this.userId).then(response => {
                    this.recordList = response.data
                    this.timelineData = []
                    if(response.data){
                        this.currentRecord = response.data[0]
                        response.data.forEach(record=>{
                            const person = record.updateBy ? record.updateBy : record.createBy
                            const content = "处理人：" + person
                            var data = {
                                time: record.updateTime ? record.updateTime : record.createTime,
                                content: content,
                                state: record.state,
                                record: record,
                            }
                            this.timelineData.push(data)
                        })
                    }
                });
            },

            /** 时间轴点击事件**/
            timeClick(data) {
                this.record = data.record
                this.reset()
            },

            /** 取消按钮 */
            cancel() {
                this.reset();
            },
            // 表单重置
            /** 表单重置 */
            reset() {
                this.currentRecord = this.record;
                this.resetForm("form");
            },

            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.currentRecord.recordId != undefined) {
                            this.currentRecord.state = '1'
                            updateRecord(this.currentRecord).then(response => {
                                this.$modal.msgSuccess("提交成功");
                                this.updateUserState(this.currentRecord.userId,"1")
                                this.getRecordByUserId();

                            });
                        }
                    }
                });
            },
            /** 更新用户状态**/
            updateUserState: function(userId,state){
                changeUserState(userId,state).then(response =>{

                })
            }

        }
    }
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: calc(100vh - 84px);
    padding: 10px;
  }
  .row{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .time-box{
      width: 20%;
      height: 100%;
      box-shadow: 0px 1px 5px 0px #ccc;
      border: 1px solid white;
      border-radius: 3px;
    }
    .record-box{
      width: 79%;
      height: 100%;
      box-shadow: 0px 3px 8px 0px #ccc;
      border: 2px solid white;
      border-radius: 3px;
      padding: 10px;
    }
    .record-box .form-box{
      height: calc(100% - 50px);
      width: 100%;
      overflow-y: scroll;
    }

    .record-box .file-box{
      padding: 40px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: left;

    }
    .record-box .file-box .img{
      width: 220px;
      height: 350px;
      border-radius: 5px;
      object-fit: contain;
      padding: 20px;
    }
    .record-box .dialog-footer{
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: right;
      background-color: transparent;
    }

  }
</style>
